<template>
    <n-form
        ref="formRef"
        label-placement="top"
        :label-width="80"
        :model="form"
        :rules="rules"
    >
        <n-form-item label="头像" path="avatar">
            <jb-avatar v-model:src="form.avatar" :upload="true" width="60"></jb-avatar>
        </n-form-item>
        <n-form-item label="编号" path="sn">
            <jb-input v-model:value="form.sn" placeholder="请输入编号" />
        </n-form-item>
        <n-form-item label="姓名" path="name">
            <jb-input v-model:value="form.name" placeholder="请输入姓名" />
        </n-form-item>
        <n-form-item label="用户名" path="userName">
            <jb-input v-model:value="form.userName" placeholder="请输入用户名" />
        </n-form-item>
        <n-form-item label="手机号" path="phone">
            <jb-input v-model:value="form.phone" placeholder="请输入手机号" />
        </n-form-item>
        <n-form-item label="类型" path="type">
            <jb-select
                v-model:value="form.type"
                :value-to-number="true"
                url="/api/admin/dictionary/options?typeKey=dept_type"
                placeholder="=请选择="
                :clearable="false"
                filterable
                class="w-140px"
            ></jb-select>
        </n-form-item>
        <n-form-item label="邮箱" path="email">
            <jb-input v-model:value="form.email" placeholder="请输入邮箱地址" />
        </n-form-item>
        <n-form-item label="密码" path="password">
            <jb-input
                v-model:value="form.password"
                type="password"
                placeholder="请输入密码"
            />
        </n-form-item>

        <n-form-item label="标题" path="title">
            <jb-input
                v-model:value="form.title"
                :maxlength="100"
                placeholder="请输入标题"
            />
        </n-form-item>
        <n-form-item label="性别" path="sex">
            <jb-radio-group
                v-model:value="form.sex"
                :value-to-number="true"
                url="/api/admin/dictionary/options?typeKey=sex"
            ></jb-radio-group>
        </n-form-item>

        <n-form-item label="年龄" path="age">
            <n-input-number
                v-model:value="form.age"
                :show-button="false"
                placeholder="请输入年龄"
                :precision="0"
            />
        </n-form-item>
        <n-form-item label="价格" path="price">
            <n-input-number
                v-model:value="form.price"
                placeholder="请输入价格"
                :precision="2"
            />
        </n-form-item>
        <n-form-item label="购买数量" path="buyCount">
            <n-input-number
                v-model:value="form.buyCount"
                placeholder="请输入购买数量"
                :precision="0"
            />
        </n-form-item>
        <n-form-item label="积分" path="score">
            <n-input-number
                v-model:value="form.score"
                :show-button="false"
                placeholder="请输入积分"
                :precision="0"
            />
        </n-form-item>
        <n-form-item label="爱好" path="hobbys">
            <jb-checkbox-group
                v-model:value="form.hobbys"
                :options="[
                    { text: '游泳', value: '游泳' },
                    { text: '篮球', value: '篮球' },
                    { text: '足球', value: '足球' }
                ]"
            ></jb-checkbox-group>
        </n-form-item>
        <n-form-item label="部门" path="deptId">
            <jb-tree-select
                v-model:value="form.deptId"
                url="/api/admin/dept/enableOptions"
            ></jb-tree-select>
        </n-form-item>
        <n-form-item label="岗位" path="posts">
            <jb-select
                v-model:value="form.posts"
                url="/api/admin/post/options"
                multiple
            ></jb-select>
        </n-form-item>
        <n-form-item label="角色" path="roles">
            <jb-tree-select
                v-model:value="form.roles"
                checkable
                cascade
                check-strategy="child"
                url="/api/admin/role/datas"
                multiple
            ></jb-tree-select>
        </n-form-item>
        <n-form-item label="开始时间" path="startTime">
            <n-date-picker
                v-model:formatted-value="form.startTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                clearable
            />
        </n-form-item>
        <n-form-item label="结束时间" path="endTime">
            <n-date-picker
                v-model:formatted-value="form.endTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                clearable
            />
        </n-form-item>
        <n-form-item label="状态" path="state">
            <jb-radio-group
                v-model:value="form.state"
                :value-to-number="true"
                url="/api/admin/dictionary/options?typeKey=todo_state"
            ></jb-radio-group>
        </n-form-item>

        <n-form-item label="简介" path="briefInfo">
            <jb-input
                v-model:value="form.briefInfo"
                type="textarea"
                placeholder="请输入简介信息"
            />
        </n-form-item>
        <n-form-item label="内容" path="content">
            <jb-editor v-model="form.content" class="h-400px"></jb-editor>
        </n-form-item>
    </n-form>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { FormInst, FormRules } from 'naive-ui'
import { Rules } from '@/utils'
import { JBoltApi } from '@/utils/request'
import { useResetableData } from '@/hooks/common/use-resetable-data'
import { ResData } from '@/typings/request'

const props = withDefaults(
    defineProps<{
        id?: string
    }>(),
    {
        id: ''
    }
)

/** 表单相关 start */
const formRef = ref<FormInst | null>()
interface PostType {
    id: string
    name: string
    title: string
    sn: string
    sex: number
    age: number | undefined
    hobbys: string
    deptId: string
    posts: string
    roles: string
    startTime: string | null
    endTime: string | null
    avatar: string
    state: number | undefined
    phone: string
    email: string
    userName: string
    password: string
    briefInfo: string
    content: string
    score: number | undefined
    price: number | undefined
    buyCount: number | undefined
    amount: number | undefined
    type: number | undefined
}
const rules: FormRules = {
    name: new Rules().required('请输入姓名').value,
    userName: new Rules().required('请输入用户名').value,
    type: new Rules().required('请选择类型').value,
    sn: new Rules().required('请输入编码').value,
    age: new Rules().gt(0).lt(150).value,
    phone: new Rules().required().phone().value,
    email: new Rules().email().value,
    password: new Rules().minLength(6, '密码不能少于6位').value
}

const form = useResetableData<PostType>({
    id: '',
    name: '',
    title: '',
    sn: '',
    sex: 1,
    age: undefined,
    hobbys: '',
    deptId: '',
    posts: '',
    roles: '',
    startTime: null,
    endTime: null,
    avatar: '',
    state: 1,
    phone: '',
    email: '',
    userName: '',
    password: '',
    briefInfo: '',
    content: '',
    score: undefined,
    price: undefined,
    buyCount: undefined,
    amount: undefined,
    type: undefined
})
/**
 * 提交表单
 */
async function submit() {
    await formRef.value?.validate()
    let url = props.id ? '/api/admin/demoTable/update' : '/api/admin/demoTable/save'

    await JBoltApi.tryPost(url, form)
    return true
}

function loadEditData() {
    JBoltApi.get<ResData>(`/api/admin/demoTable/${props.id}`).then(
        ({ error, result }) => {
            if (error) return
            form._reset(result.data)
        }
    )
}

onMounted(() => {
    if (props.id) {
        loadEditData()
    }
})

defineExpose({
    submit
})

/** 表单相关 end */
</script>
<style scoped></style>
